<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能数码</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/product-list.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
            color: white;
        }

        header h1 {
            margin: 0;
        }

        header a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
        }

        header a:hover {
            background-color: #555;
        }

        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style-type: none;
            padding: 0;
        }

        .product-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            width: 220px; /* Adjusted width for better layout */
            text-align: center;
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* Added transform for hover effect */
        }

        .product-list li:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* Slight lift effect on hover */
        }

        img {
            max-width: 100%;
            max-height: 150px; /* Set maximum height for consistency */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 5px;
        }

        .add-to-cart {
            background-color: #28a745; /* Green color */
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: auto; /* Push button to bottom */
        }

        .add-to-cart:hover {
            background-color: #218838; /* Darker green on hover */
        }

        .product-description {
            margin-top: 10px; /* Space between button and description */
            font-size: 14px; /* Font size for description */
            color: #666; /* Grey color for description */
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border-radius: 8px; /* Rounded corners for modal */
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <h1>智能数码</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="cart.html">我的购物车</a>
            <a href="user-center.html">用户中心</a>
        </nav>
    </header>

    <ul class="product-list">
        <!-- 产品列表 -->
        <li>
            <img src="./images/摄影 智能电子设备/GoPro HERO10 Black 运动相机.jpg" alt="GoPro HERO10 Black">
            <h3>GoPro HERO10 Black</h3>
            <p>1499元起</p>
            <button class="add-to-cart" onclick="addToCart('GoPro HERO10 Black', 1499)">加入购物车</button>
            <p class="product-description">GP2处理器，5.3K视频，超强防抖</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/大疆御 Mavic Air 2 无人机.jpg" alt="大疆御 Mavic Air 2">
            <h3>大疆御 Mavic Air 2</h3>
            <p>3699元起</p>
            <button class="add-to-cart" onclick="addToCart('大疆御 Mavic Air 2', 3699)">加入购物车</button>
            <p class="product-description">高性能无人机，48MP照片，4K视频</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/GoPro HERO9 Black.jpg" alt="GoPro HERO9 Black">
            <h3>GoPro HERO9 Black</h3>
            <p>1299元起</p>
            <button class="add-to-cart" onclick="addToCart('GoPro HERO9 Black', 1299)">加入购物车</button>
            <p class="product-description">5K视频，HyperSmooth防抖</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/Insta360 ONE X2.jpg" alt="Insta360 ONE X2">
            <h3>Insta360 ONE X2</h3>
            <p>2499元起</p>
            <button class="add-to-cart" onclick="addToCart('Insta360 ONE X2', 2499)">加入购物车</button>
            <p class="product-description">360度全景，流畅视频录制</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/Kindle Paperwhite 电子书阅读器.jpg" alt="Kindle Paperwhite">
            <h3>Kindle Paperwhite</h3>
            <p>899元起</p>
            <button class="add-to-cart" onclick="addToCart('Kindle Paperwhite', 899)">加入购物车</button>
            <p class="product-description">高分辨率，适合长时间阅读</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/SonyZV-E10L.jpg" alt="Sony ZV-E10L">
            <h3>Sony ZV-E10L</h3>
            <p>4999元起</p>
            <button class="add-to-cart" onclick="addToCart('Sony ZV-E10L', 4999)">加入购物车</button>
            <p class="product-description">Vlog设计，出色视频性能</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/富士 instax mini 12.jpg" alt="富士 instax mini 12">
            <h3>富士 instax mini 12</h3>
            <p>399元起</p>
            <button class="add-to-cart" onclick="addToCart('富士 instax mini 12', 399)">加入购物车</button>
            <p class="product-description">即时成像，轻松打印照片</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/影石Insta360 GO 3S.jpg" alt="影石Insta360 GO 3S">
            <h3>影石Insta360 GO 3S</h3>
            <p>1999元起</p>
            <button class="add-to-cart" onclick="addToCart('影石Insta360 GO 3S', 1999)">加入购物车</button>
            <p class="product-description">超轻便，适合随身携带</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/索尼PlayStation 5 游戏主机.jpg" alt="索尼PlayStation 5">
            <h3>索尼PlayStation 5</h3>
            <p>3999元起</p>
            <button class="add-to-cart" onclick="addToCart('索尼PlayStation 5', 3999)">加入购物车</button>
            <p class="product-description">次世代游戏主机，4K游戏体验</p>
        </li>

        <li>
            <img src="./images/摄影 智能电子设备/大疆 DJI Action 4.jpg" alt="大疆 DJI Action 4">
            <h3>大疆 DJI Action 4</h3>
            <p>2699元起</p>
            <button class="add-to-cart" onclick="addToCart('大疆 DJI Action 4', 2699)">加入购物车</button>
            <p class="product-description">运动摄像机，高分辨率视频</p>
        </li>
    </ul>
    <script>
        function addToCart(productName, price) {
            let cart = JSON.parse(localStorage.getItem('cart')) || [];
            
            // 检查产品是否已在购物车中
            const existingProduct = cart.find(item => item.productName === productName);
            
            if (existingProduct) {
                existingProduct.quantity += 1; // 增加数量
            } else {
                cart.push({ productName, price, quantity: 1 }); // 添加新产品
            }
            
            localStorage.setItem('cart', JSON.stringify(cart)); // 更新购物车
            alert(`${productName} 已加入购物车！`);
        }
    </script>
</body>

</html>